﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js和css3带反光特效的按钮插件</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>js和css3带反光特效的按钮插件 <span>Fluent Reveal Effect JavaScript library for web</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="#"><span> Home</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="#" title="返回下载页"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="title">
			Reveal Effects - Fluent Design
		</div>

		<div class="toolbar">
			<button class="btn">Button 1</button>
			<button class="btn btn-blue">Button 2</button>
			<button class="btn btn-red">Button 3</button>
			<button class="btn btn-green">Button 4</button>
			
		</div>
		
		<div class="effect-group-container toolbar-2">
			<div class="btn-border btn-black btn5">
				<button class="btn btn-black">Button 5</button>
			</div>
			<div class="btn-border btn-blue btn6">
				<button class="btn btn-blue">Button 6</button>
			</div>
			<div class="btn-border btn-red btn7">
				<button class="btn btn-red">Button 7</button>
			</div>
			<div class="btn-border btn-green btn8">
				<button class="btn btn-green">Button 8</button>
			</div>
			<br/>
			<div class="btn-border btn-round btn-red btn6">
				<button class="btn btn-red">Button 9</button>
			</div>
			<div class="btn-border btn-round btn-blue btn9">
				<button class="btn btn-blue">Button 10</button>
			</div>
			<div class="btn-border btn-round btn-black btn10">
				<button class="btn btn-black">Button 11</button>
			</div>
		</div>
	</div>
	
	<script src="js/main.js"></script>
</body>
</html>